<template>
    <div>
        <home-header></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-tabpage :list="categoryList"></home-tabpage>
        <home-components :list="actList"></home-components>
<!--         <home-footer></home-footer> -->
        <div>
          <footer>
            <el-row>
              <router-link to='/'>
                <el-col :span="6" class="el"><div class="grid-content iconfont bg-blue"><span class="ico-info">&#xe603;</span></div></el-col>
              </router-link>
              <router-link to='/lunch'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe64d;</span></div></el-col>
              </router-link>
               <router-link to='/car'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe65e;</span></div></el-col>
              </router-link>
              <router-link to='/user'>
                <el-col :span="6" class="el"><div class="grid-content iconfont"><span class="ico-info">&#xe602;</span></div></el-col>
              </router-link>
            </el-row>
          </footer>
          <div style="height: 47px"></div>
        </div>
    </div>
</template>

<script>
import HomeHeader from './components/Header.vue'
import HomeSwiper from './components/Swiper.vue'
import HomeTabpage from './components/Tabpage.vue'
import HomeComponents from './components/Components.vue'
//import HomeFooter from './components/Footer.vue'
import axios from 'axios'

export default {
    name: 'Home',
    components: {
        HomeHeader,
        HomeSwiper,
        HomeTabpage,
        HomeComponents,
        // HomeFooter
    },
    data () {
        return {
            swiperList: [],
            actList: [],
            categoryList: []
        }
    },
    methods: {
        getHomeInfo () {
            axios.get('/static/mock/index.json')
                .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc (res) {
            res = res.data
            if (res.ret && res.data) {
                const data = res.data
                this.swiperList = data.swiperList
                this.actList = data.actList
                this.categoryList = data.categoryList
            }else {
                alert('数据获取失败')
            }
            //console.log(res)
        }
    },
    mounted () {
        this.getHomeInfo()
    }
}
</script>

<style lang="stylus" scoped>
    footer
      position:fixed;
      bottom:0;
      z-index:9999;
      height: 41px
      width: 100%
      background-color: white
      border-top: 1px solid #eee
      .el
        color: black
        .grid-content
          text-align: center;
          height: 41px
          font-size: 30px
          padding: 3px
          .ico-info
             vertical-align: middle
        .bg-blue
          color: #409EFF
</style>